<template>
  <div id="UserInfo">
    <x-header :left-options="{showBack: false}" class="header vux-1px-b" title="个人资料">
      <a slot="left"><i class="tp-icon icon-black-back" onclick="javascript:history.back(-1);"> </i></a>
      <a slot="right" @click="savePersonInfo">保存</a>
    </x-header>
    <div class="photo">
      <div id="form">
        <div class="upload vux-1px-b">
          <p>
            <input type="file" id="file1" class="fileWrap" name="image" accept="image/*"/>
            <img id="headimg" :src="'./static/data/user/'+userInfo.imgsrc" alt="" class="chooseImg"
                 onerror="this.src='/los/uploads/thumb/header/defaultImg.jpg'"/>
            <span>修改头像</span>
          </p>
        </div>
        <group>
          <x-input title="更改昵称" :value="userInfo.member_name" @input="nickInput($event)" type="text"
                   :show-clear="false" placeholder="请输入昵称"/>
        </group>
        <group>
          <x-input title="真实姓名" :value="userInfo.member_nickName" @input="trueInput($event)" type="text"
                   :show-clear="false" placeholder="请输入真实姓名"/>
        </group>
        <div @click="show =! show" class="sexList">
          <span>性别</span>
          <b class="sex" v-if="sexname == 2">女</b>
          <b class="sex" v-else-if="sexname == 1">男</b>
        </div>
        <popup v-model="show" style="height: 3rem;">
          <radio :selected-label-style="{color: '#FF9900'}" v-model="sexname" :options="sexs"></radio>
        </popup>
        <group>
          <datetime placeholder="请选择生日" :min-year=1930 :value="member_birthday" @input="bornInput($event)"
                    @on-change="change" title="生日"></datetime>
        </group>
        <!-- -->
        <div @click="sms_codes = !sms_codes" class="phone">
          <span class="tel-span">手机号码</span>
          <input type="number" v-model="tel" readonly="readonly" disabled="disabled" placeholder="请输入手机号"
                 class="tel-input"/>
          <!--<x-input title="手机号码" name="mobile" :value="userInfo.member_mobile" @input="mobileInput($event)" placeholder="请输入手机号" keyboard="number" :show-clear="false" is-type="china-mobile" readonly="readonly"></x-input>-->
        </div>
        <group class="textarea">
          <x-textarea title="个人简介" placeholder="描述一下有趣的自己" @input="infoInput($event)" :value="userInfo.member_content"
                      id="text" :max="200" :show-counter="false" :height="150" :rows="8" :cols="30"></x-textarea>
        </group>
      </div>
    </div>

    <!--手机号获取验证码-->
    <x-dialog v-model="sms_codes" class="dialog-demo getSms" @on-hide="closeAlert()" @on-show="showAlert()"
              hide-on-blur>
      <div style="background: #fff;">
        <div class="checkTitle">
          <p>请输入您的手机号</p>
        </div>
        <div class="uploadTel">
          <b>+86</b>
          <input v-model="mobile" type="number" placeholder="请输入手机号"/>
        </div>
        <div class="sms">
          <input type="number" v-model="sms_code" placeholder="请输入验证码"/>
          <span @click="verify()">{{btntxt}}</span>
        </div>
        <button @click="submitTel">提交</button>
      </div>
    </x-dialog>
    <!--性别-->
    <toast v-model="success" type="text" width='6.2rem' is-show-mask>{{msg}}</toast>
    <loading :show="show1" text="上传中"></loading>
  </div>
</template>

<script>
import { getuserInfo } from '@/api/service'
import $ from 'jquery'
import 'lrz/dist/lrz.all.bundle'
import {
  Datetime,
  Group,
  XHeader,
  Loading,
  XInput,
  XDialog,
  Toast,
  XTextarea,
  Popup,
  Radio,
  PopupRadio,
  Actionsheet
} from 'vux'

export default {
  data() {
    return {
      bord: '',
      introduce: '',
      nickname: '',
      truename: '',
      tel: '',
      introduce: '',
      show: false,
      sexname: '',
      userInfo: [],
      member_birthday: '',
      btntxt: "获取验证码",
      success: false,
      show1: false,
      msg: '',
      sexs: [{
        key: 2,
        value: '女'
      }, {
        key: 1,
        value: '男'
      }],
      sms_codes: false,
      sms_code: '',
      mobile: '',
      times: 0
    }
  },
  components: {
    Datetime,
    Group,
    XHeader,
    XInput,
    XTextarea,
    Popup,
    Radio,
    PopupRadio,
    Actionsheet,
    Toast,
    Loading,
    XDialog,
    Toast
  },
  mounted() {
    //修改头像
    let _this = this;
    $("#file1").change(function () {
      let that = this;
      _this.show1 = true;
      lrz(that.files[0]).then((data) => {
        let str =
          '<img class="editImg" style="width: 1.54rem;height: 1.54rem;float: left;border-radius: 50%;" id="headimg" src ="' + data.base64 + '"/>' +
          '<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>';
        $('.upload').find('p img').replaceWith(str);
        _this.show1 = false;
      })
    });
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    setToday(value) {
      console.log(value);
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      if (day < 10) day = '0' + day
      this.value7 = now.getFullYear() + '-' + cmonth + '-' + day
      console.log('set today ok')
    },
    change(value) {
      this.member_birthday = value;
    },
    click(key, item) {
      this.sexname = item.label;
    },
    //手机验证码部分
    timer: function () {
      if (this.times > 0) {
        this.times--;
        this.btntxt = this.times + "s后重新获取";
        setTimeout(this.timer, 1000);
        this.disabled = true;
      } else {
        this.times = 0;
        this.btntxt = "点击获取";
        this.disabled = false;
      }
    },
    //点击获取验证码
    verify: function () {
      console.log(this.mobile);
      var reg1 = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (this.times > 0) {
        return
      } else if (this.mobile == '') {
        this.success = !this.success;
        this.msg = '手机号不为空';
      } else if (!reg1.test(this.mobile)) {
        this.success = !this.success;
        this.msg = '手机号不合法';
      } else {
        this.times = 60;
        this.timer();
        let params = {
          tel: this.mobile
        };
        this.$http({
          method: 'POST',
          url: '/los/api/member/sms_verify.json',
          data: params
        }).then((result) => {
          this.success = !this.success;
          this.msg = result.data.msg;
        }).catch((err) => {
          console.log(err);
        })
      }
    },
    submitTel: function () {
      let params = {
        member_mobile: this.mobile,
        sms_code: this.sms_code,
      }
      console.log(params);
      if (this.mobile == '') {
        this.success = !this.success;
        this.msg = '手机号不为空';
      } else if (this.sms_code == '') {
        this.success = !this.success;
        this.msg = '请填写验证码';
      } else {
        this.$http({
          method: 'POST',
          url: '/los/api/member/x.json',
          data: params
        }).then((result) => {
          if (result.data.code == 1) {
            this.success = !this.success;
            this.msg = result.data.msg;
            this.sms_codes = !this.sms_codes;
            this.tel = this.mobile;
            this.getPersonInfo();
          } else {
            this.success = !this.success;
            this.msg = result.data.msg;
          }
        }).catch((err) => {
          console.log(err);
        })
      }
    },
    getPersonInfo: function () {
      getuserInfo().then(result => {
        this.userInfo = result
        this.member_birthday = this.userInfo.member_birthday
        this.tel = this.userInfo.member_phone
        console.log(result);
      })
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/member/info.json',
      //   data: ''
      // }).then((result) => {
      //   this.userInfo = result.data.data;
      //   this.member_birthday = this.userInfo.member_birthday.toString();
      //   this.sexname = this.userInfo.member_sex;
      //   this.tel = this.userInfo.member_mobile;
      // }).catch((err) => {
      //   console.log(err);
      // })
    },
    nickInput: function (e) {
      this.nickname = e;
    },
    trueInput: function (e) {
      this.truename = e;
    },
    mobileInput: function (e) {
      this.tel = e;
    },
    infoInput: function (e) {
      this.introduce = e;
    },
    bornInput: function (e) {
      this.member_birthday = e;
    },

    //保存个人数据信息
    savePersonInfo: function () {
      var val = $('.upload').find('#images').val();
      var params = {
        member_thumb: val,
        member_nickname: this.nickname,
        member_truename: this.truename,
        member_sex: this.sexname,
        member_birthday: this.member_birthday,
        member_intro: this.introduce,
      }
      this.$http({
        method: 'POST',
        url: '/los/api/member/edit.json',
        data: params
      }).then((result) => {
        console.log(result);
        if (result.data.code == 1) {
          this.success = !this.success;
          this.msg = '提交成功';
          this.updateThumb(this.userInfo.member_id, 132, 132).then((result) => {
            if (result.status == 200) {
              setTimeout(function () {
                location.href = '#/User'
              }, 1000)
            }
          }).catch((err) => {

          });
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    updateThumb: function (member_id, width, height) {
      return this.$http({
        method: 'GET',
        url: '/los/api/member/thumb/?member_id=' + member_id + '&width=' + width + '&height=' + height,
        data: ''
      })
    },
    closeAlert: function () {
      $('body').css('overflow', 'auto');
    },
    showAlert: function () {
      $('body').css('overflow', 'hidden');
    },
  }
}
</script>

<style>
  .vux-header .vux-header-right a {
    color: #777;
    font-size: 0.37rem !important;
  }

  .vux-header {
    background: #fff !important;
  }

  .vux-header .vux-header-title {
    font-size: 0.45rem !important;
    color: #333 !important;
  }

  .vux-header-right .save {
    color: #333;
    font-size: 0.37rem;
  }

  #form {
    margin-top: 0.26rem;
    width: 100%;
    padding: 0 0.26rem;
    background: #fff;
  }

  #form .weui-cells:after {
    border-color: #e6e6e6 !important;
  }

  #form .upload {
    width: 100%;
    height: 2.08rem;
    padding: 0.26rem 0 0;
    overflow: hidden;
  }

  #form .upload p {
    position: relative;
  }

  #form .upload p .fileWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.78rem;
    opacity: 0;
  }

  #form .upload #headimg {
    width: 1.54rem;
    height: 1.54rem;
    border-radius: 50%;
    float: left;
  }

  #form .upload p span {
    display: inline-block;
    float: left;
    margin-left: 1.46rem;
    font-size: 0.37rem;
    color: #333;
    margin-top: 0.53rem;
  }

  #form .listInfo {
    width: 100%;
    height: 1.3rem;
  }

  #form .listInfo .weui-cell:before {
    border: none;
  }

  #form .sexList {
    line-height: 1.13rem;
    height: 1.13rem;
    border-bottom: solid 1px #f3f3f3;
  }

  #form .sexList span {
    float: left;
    width: 3.01rem;
    color: #aaa;
    font-size: 0.37rem;
    height: 1.13rem;
    line-height: 1.13rem;
  }

  #form .sexList b {
    color: #333;
    font-weight: normal;
    display: inline-block;
    line-height: 1.13rem;
    height: 1.13rem;
    font-size: 0.37rem;
  }

  #form .listInfo p {
    width: 100%;
    height: 100%;
    line-height: 1.3rem;
    height: 1.3rem;
    overflow: hidden;
  }

  #form .listInfo p span {
    float: left;
    width: 3.01rem;
    color: #aaa;
    font-size: 0.37rem;
  }

  #form .listInfo p b {
    float: left;
    font-weight: normal;
    font-size: 0.37rem;
    color: #333;
  }

  .phone {
    line-height: 1.3rem;
    height: 1.3rem;
    position: relative;
    display: flex;
  }

  .phone:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 1.2rem;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }

  .phone .tel-span {
    color: #aaa;
    width: 3.01rem !important;
    font-size: 0.37rem;
  }

  .phone .tel-input {
    height: 1.3rem;
    line-height: 1.3rem;
    -webkit-box-flex: 1;
    flex: 1;
    background: #fff;
  }

  .getSms .weui-mask {
    background: rgba(0, 0, 0, 0.7);
  }

  .getSms .weui-dialog {
    width: 90%;
    max-width: 400px;
  }

  .getSms {
    background: #fff;
    position: absolute;
    margin: 4rem 0 0;
    height: 8rem;
    border-radius: 0.1rem;
  }

  .getSms .checkTitle {
    height: 1.44rem;
    background: #f3f3f3;
    width: 100%;
    line-height: 1.44rem;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
  }

  .getSms .uploadTel b {
    font-weight: normal;
    font-size: 0.42rem;
    color: #333;
    margin-right: 0.66rem;
    padding-left: 0.26rem;
  }

  .getSms .checkTitle p {
    font-size: 0.4rem;
    color: #333;
    padding: 0 0.26rem;
  }

  .getSms .uploadTel,
  .getSms .sms {
    text-align: left;
    height: 1.44rem;
    line-height: 1.44rem;
    background: #fff;
    border-bottom: 1px solid #f3f3f3;
  }

  .getSms .uploadTel input,
  .getSms .sms input {
    font-size: 0.4rem;
    color: #333;
    height: 1.36rem;
    line-height: 1.36rem;
  }

  .getSms .sms input {
    padding-left: 0.26rem;
  }

  .getSms .sms span {
    font-size: 0.4rem;
    color: #a30000;
    float: right;
    padding-right: 0.26rem;
  }

  .getSms button {
    width: 8.53rem;
    height: 1.17rem;
    background: #a30000;
    display: block;
    text-align: center;
    margin: 1rem auto;
    border: none;
    color: #fff;
    font-size: 0.48rem;
    border-radius: 0.1rem;
  }

  /*个人资料修改样式*/

  .weui-cells:before {
    border: none !important;
  }

  .vux-x-textarea {
    height: 4.21rem !important;
  }

  .weui-cells {
    height: 1.3rem;
    margin-top: 0 !important;
  }

  .weui-cell {
    line-height: 1.3rem !important;
    height: 1.3rem !important;
    padding: 0 !important;
  }

  .weui-cell > div p,
  .weui-cell__hd .weui-label {
    color: #aaa;
    width: 3.01rem !important;
    font-size: 0.37rem;
  }

  .vux-cell-primary {
    flex: none !important;
  }

  .weui-cell_access .weui-cell__ft:after {
    display: none !important;
  }

  .vux-cell-placeholder,
  .vux-cell-value,
  #vux-x-input-96ba8,
  {
    font-size: 0.37rem !important;
    color: #aaa !important;
    line-height: normal !important;
  }

  .weui-input,
  .weui-textarea {
    font-size: 0.37rem !important;
    color: #333 !important;
    line-height: normal !important;
  }

  .weui-textarea {
    padding-top: 0.34rem;
  }

  .textarea .weui-cells {
    height: 4.21rem !important;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: 0.37rem;
  }

  .sexCheck .weui-cells {
    height: 3rem !important;
  }

  .vux-cell-value {
    color: #333 !important;
  }

  .vux-popup-dialog .weui-cell:before {
    left: 0;
  }

  .dp-container .dp-header .vux-datetime-clear {
    color: #333 !important;
  }
</style>
<style>

</style>
